import styles from "./index.module.css";
import Truck from "./components/Truck";
import { request } from "@/utils/request";
import type { PagedDataResponse, Tag } from "@/type";

export default async function page() {
  const res = await request<PagedDataResponse<Tag>>("/tags");
  const tagList = res?.data.list;

  return (
    <div className={`${styles.container} w-screen h-screen py-10 md:py-[80px]`}>
      <div className="w-full md:w-[60vw] mx-auto px-5">
        <div className="mb-[50px] text-[22px] md:text-[28px] text-center cursor-default">
          🎉翻牌子喽😎
        </div>
        <div className="flex flex-wrap">
          {tagList &&
            tagList.map((item, i) => (
              <div key={i} className={styles.button}>
                <span className="mr-3 text-base md:text-lg">
                  {item.tag_name}
                </span>
                <span className="text-sm md:text-base">{item.tag_id}</span>
              </div>
            ))}
        </div>
      </div>
      <div className="absolute top-[30vh] right-[10vw] md:right-[20vw]">
        <Truck />
      </div>
    </div>
  );
}
